<template>
<div class="carpcontain">
  <div class="carpaction">
    <div style="display: flex;align-items: center">
      <div style="float: left;opacity: 0.6;font-size: 14px">
        注：学员仅可在自己选择的<span style="font-weight: 600"> 地点 </span>和<span style="font-weight: 600"> 时间段 </span>练车
      </div>
    </div>
    <div style="margin-right: 5px;font-weight: 600">总场地数：{{ num }}</div>
  </div>
  <div class="carpcard">
    <el-empty description="暂无信息可供选择" v-show="isempty"/>
    <div v-for="(item,index) in carpractiseList" :key="index" v-show="!isempty">
      <div class="_carpcard">
        <div class="card-info">
          <div class="card-avatar">{{ item.subject }}</div>
          <div class="card-title">
            <div>编号：<span style="padding: 1px 4px;font-weight: 600">{{item.id}}</span></div>
            <div>地点：{{item.place}}</div>
            <div>时间段：{{item.time}}</div>
            <div v-if="item.status == '1'">状态：<span style="background-color: #ff7474;padding: 1px 4px;font-weight: 600">已被预约</span></div>
            <div v-else>状态：<span style="background-color: #00ce00;padding: 1px 4px;font-weight: 600">可预约</span></div>
          </div>
        </div>
        <ul class="card-social">
          <li class="card-social__item"><button class="carpbut" @click="changepractise(item.status,item.id)">预约</button></li>
        </ul>
      </div>
    </div>
    <div style="position: absolute;bottom: 0;height: 40px" >
      <el-pagination
          v-model:currentPage="currentPage1"
          :page-size="pagesize"
          background
          layout="total, prev, pager, next"
          :total="stutotal"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</div>
  <Dialog v-model="centerDialogVisible" :initplaceid="initplaceid" :initmyid="initmyid" :refPlace="refPlace"/>
</template>

<script setup>
import {ref} from "vue";
import Dialog from '@/components/add/Aorderpractise'
import {getPlaceByPlace} from "@/api/practise";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";
import {getTeacherPlace} from "@/api/teacher";
import {getOrderPractises} from "@/api/order_practise";
const store = useStore()

//初始化
const centerDialogVisible = ref(false)
const carpractiseList = ref({})
const num = ref(0)
const coachplace = ref(null)

const currentPage1 = ref(1)
const pagesize = ref(6)
const stutotal = ref(0)

const isempty  =ref(false)

//弹窗数据
const initplaceid = ref(null)
const initmyid = ref(null)

//预约状态
const yuyueid = ref('')

const GetKorderPlace = async () =>{
  await getOrderPractises(store.getters.Id).then(res=>{
    yuyueid.value = res.data
  })
}
// GetKorderPlace()
const refPlace = async () =>{
  await getTeacherPlace(store.getters.Id).then(res=>{
    if (res.code === 20041){
      coachplace.value = res.data
      getPlaceByPlace({pageNum:currentPage1.value,pageSize:pagesize.value,place:res.data}).then(re=>{
        if (re.code === 20041){
          carpractiseList.value = re.data.list
          num.value = re.data.total
          isempty.value = false
        }else {
          carpractiseList.value = re.data.list
          num.value = re.data.total
          isempty.value = true
        }
      })
    }else {
      ElMessage({
        message: res.msg,
        type: 'error',
      })
    }
  })
}
refPlace()

//选择场地
const changepractise = (status,id) =>{
  if (status == '1'){
    ElMessage({
      message: '不可预约',
      type: 'warning',
    })
  }else {
    centerDialogVisible.value = true
    initplaceid.value = id
    initmyid.value = store.getters.Id
  }
}
//预约


const handleCurrentChange = () =>{

  console.log(currentPage1.value)
}

</script>

<style scoped>
/**{*/
/*  border: 1px solid blue;*/
/*}*/
.carpcontain{
  flex: 1;
  margin: 0;
  padding: 10px 10%;
  height: auto;
  overflow: scroll;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  background-color: white;
}
.carpaction{
  height: 70px;
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e4e7ed;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
.carpcard{
  flex: 1;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid #e4e7ed;
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.12);

}
.carpcard>div{
  width: 20vw;
  min-width: 330px;
  height: 200px;
  margin: 10px;
  box-sizing: border-box;
}

/* From uiverse.io by @alexruix */
._carpcard{
  width: 100%;
  height: 100%;
  border: 1px solid #e4e7ed;
  background-color: #ffffff;
  padding: 10px;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .2s ease;
}

.card-info {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition: all .2s ease;
}

/*Image*/
.card-avatar {
  --size: 60px;
  background: linear-gradient(to top, #f1e1c1 0%, #fcbc97 100%);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transition: transform .2s ease;
  margin-bottom: 1rem;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

}


/*Card footer*/
.card-social {
  transform: translateY(200%);
  display: flex;
  justify-content: space-around;
  width: 100%;
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

.card-social__item {
  list-style: none;
}

.card-social__item svg {
  display: block;
  height: 18px;
  width: 18px;
  fill: #515F65;
  cursor: pointer;
  transition: fill 0.2s ease ,transform 0.2s ease;
}

/*Text*/
.card-title {
  color: #333;
  flex: 1;
  font-weight: 400;
  line-height: 2rem;
}
.card-title span{
  color: #ffffff;
  border: 1px solid #cacaff;
  background-color: #73b7ff;
  border-radius: 2px;
  padding: 2px;
}


/*Hover*/
._carpcard:hover {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}

._carpcard:hover .card-info {
  height: 80%;
  transform: translateY(-5%);
}

._carpcard:hover .card-social {
  transform: translateY(0);
  opacity: 1;
}

.card-social__item svg:hover {
  fill: #232323;
  transform: scale(1.1);
}

.card-avatar:hover {
  transform: scale(1.1);
}

/* From uiverse.io by @arieshiphop */
.carpbut{
  font-size: 17px;
  padding: 0.5em 2em;
  border: transparent;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  background: dodgerblue;
  color: white;
  border-radius: 4px;
}

.carpbut:hover {
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);
}

.carpbut:active {
  transform: translate(0em, 0.2em);
}
</style>